import { View, Image, Text } from '@tarojs/components'
import './CategoryGrid.scss'

interface CategoryItem {
  id: number
  name: string
  icon: string | StaticImageData
}

interface CategoryGridProps {
  categories: CategoryItem[]
  className?: string
  onItemClick?: (item: CategoryItem) => void
}

export default function CategoryGrid({ categories, className = '', onItemClick }: CategoryGridProps) {
  return (
    <View className={`category-grid ${className}`}>
      {categories.map(item => (
        <View 
          className='category-grid__item' 
          key={item.id}
          onClick={() => onItemClick?.(item)}
        >
          <Image className='category-grid__icon' src={item.icon} />
          <Text className='category-grid__text'>{item.name}</Text>
        </View>
      ))}
    </View>
  )
} 